// index.ts
// 获取应用实例
// const app = getApp<IAppOption>()
// const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
import StorageUtil from '../../utils/storage'

Component({
  data: {
    motto: '喝一杯水',
    waterCount: 0,
    lastDrinkTime: '0',
    drinkInterval: 0, // 添加喝水间隔配置（单位：分钟）
    totalMl: 0,  // 添加总毫升数据
    showSettings: false,  // 控制设置区域的显示/隐藏
    mlPerDrink: 200,     // 每次喝水的毫升数
  },

  lifetimes: {
    attached() {
      // 检查是否需要自动清理数据
      this.checkAndClearData()
      
      // 获取存储的数据
      const count = StorageUtil.getWaterCount()
      const lastTime = StorageUtil.getLastDrinkTime()
      const totalMl = StorageUtil.getTotalMl() || 0  // 获取总毫升数
      const mlPerDrink = StorageUtil.getMlPerDrink() || 200  // 获取保存的每杯水量
      this.setData({
        waterCount: count,
        lastDrinkTime: lastTime ? lastTime.toLocaleTimeString('zh-CN') : '今天还没记录',
        totalMl: totalMl,
        mlPerDrink: mlPerDrink
      })
      this.drawCup()
    }
  },

  methods: {
    // 切换设置区域的显示/隐藏
    toggleSettings() {
      this.setData({
        showSettings: !this.data.showSettings
      })
    },

    // 处理每杯水量的输入变化
    onMlPerDrinkChange(e: any) {
      const value = parseInt(e.detail.value)
      // 允许输入框为空，不再自动补齐默认值
      this.setData({
        mlPerDrink: value || undefined  // 修改这里：使用undefined而不是空字符串
      })
      if (value) {  // 只有当有有效值时才保存
        StorageUtil.setMlPerDrink(value)
      }
    },

    onDrinkWater() {
      const now = new Date()
      const lastTime = StorageUtil.getLastDrinkTime()
      
      if (lastTime && (now.getTime() - lastTime.getTime()) < this.data.drinkInterval * 60 * 1000) {
        wx.showToast({
          title: `喝水要适量哦，建议${this.data.drinkInterval}分钟后再喝～`,
          icon: 'none',
          duration: 2000
        })
        return
      }

      // 获取当前设置的毫升数，如果未设置则使用默认值200
      const currentMlPerDrink = this.data.mlPerDrink || 200
      const currentTotalMl = StorageUtil.getTotalMl()
      const newTotalMl = currentTotalMl + currentMlPerDrink
      
      // 如果之前输入框是空的，现在要设置回默认值
      if (!this.data.mlPerDrink) {
        this.setData({
          mlPerDrink: 200
        })
        StorageUtil.setMlPerDrink(200)
      }

      const newCount = StorageUtil.getWaterCount() + 1
      
      StorageUtil.setWaterCount(newCount)
      StorageUtil.setLastDrinkTime(now)
      StorageUtil.setTotalMl(newTotalMl)

      this.setData({
        waterCount: newCount,
        lastDrinkTime: now.toLocaleTimeString('zh-CN'),
        totalMl: newTotalMl
      })

      // 根据总量显示不同的提示信息
      if (newTotalMl > 4000) {
        wx.showToast({
          title: `您已经喝了${newTotalMl}毫升\n请注意适量`,  // 使用\n换行显示
          icon: 'none',
          duration: 3000  // 增加显示时间
        })
      } else {
        wx.showToast({
          title: `喝了${currentMlPerDrink}毫升水，继续加油！`,
          icon: 'none',
          duration: 2000
        })
      }
      this.drawCup()  // 重新绘制水杯
    },

    onClearRecord() {
      wx.showModal({
        title: '确认清除',
        content: '确定要清除所有喝水记录吗？',
        success: (res) => {
          if (res.confirm) {
            // 清除存储的数据
            StorageUtil.setWaterCount(0)
            StorageUtil.setLastDrinkTime(null)
            StorageUtil.setTotalMl(0)  // 清除总毫升数
            
            // 更新显示
            this.setData({
              waterCount: 0,
              lastDrinkTime: '暂无记录',
              totalMl: 0
            })

            wx.showToast({
              title: '记录已清除',
              icon: 'success',
              duration: 1500
            })
            this.drawCup()  // 重新绘制水杯
          }
        }
      })
    },

    /**
     * 用户点击右上角分享给朋友
     */
    onShareAppMessage() {
      return {
        title: '每天喝杯水吧',
        path: '/pages/index/index',
        // imageUrl: '/images/share.png'  // 可选，不设置则默认截图当前页面
      }
    },

    /**
     * 用户点击右上角分享到朋友圈
     */
    onShareTimeline() {
      return {
        title: '每天喝杯水吧',
        query: '',  // 可选，分享参数
        // imageUrl: '/images/share.png'  // 可选，不设置则默认截图当前页面
      }
    },

    // 添加检查和清理数据的方法
    checkAndClearData() {
      const lastTime = StorageUtil.getLastDrinkTime()
      if (!lastTime) return

      const now = new Date()
      const lastDate = new Date(lastTime)
      
      // 获取今天凌晨4点的时间
      const today4AM = new Date(now)
      today4AM.setHours(4, 0, 0, 0)
      
      // 获取昨天凌晨4点的时间
      const yesterday4AM = new Date(today4AM)
      yesterday4AM.setDate(yesterday4AM.getDate() - 1)
      
      // 如果最后喝水时间在昨天4点之前，并且现在已经过了今天4点，就清理数据
      if (lastDate < yesterday4AM && now >= today4AM) {
        StorageUtil.setWaterCount(0)
        StorageUtil.setLastDrinkTime(null)
        StorageUtil.setTotalMl(0)  // 清除总毫升数
        
        this.setData({
          waterCount: 0,
          lastDrinkTime: '今天还没记录',
          totalMl: 0
        })
      }
    },

    async drawCup() {
      const query = wx.createSelectorQuery().in(this)
      const canvas = await new Promise<WechatMiniprogram.Canvas>(resolve => {
        query.select('#cupCanvas')
          .fields({ node: true, size: true })
          .exec((res) => {
            const canvas = res[0].node
            canvas.width = 100  // 保持合适的宽度
            canvas.height = 400
            resolve(canvas)
          })
      })
      
      const ctx = canvas.getContext('2d')
      ctx.clearRect(0, 0, 100, 400)
      
      // 计算水量百分比
      const totalMl = this.data.totalMl || 0
      const targetMl = 2000
      const percentage = Math.min(totalMl / targetMl, 1)
      
      // 更好看的颜色
      const cupOutlineColor = '#2196F3'
      const cupHighlightColor = '#64B5F6'
      const waterBaseColor = 'rgba(33, 150, 243, 0.7)'
      const waterHighlightColor = 'rgba(79, 195, 247, 0.85)'
      
      // 杯子尺寸 - 保持对称和规则形状
      const cupLeft = 35
      const cupRight = 65
      const cupTop = 30
      const cupBottom = 370
      const cupWidth = cupRight - cupLeft
      
      // 首先绘制杯子底部的阴影，表示杯子放在桌面上
      ctx.beginPath()
      // 创建一个椭圆形的渐变
      const shadowCenterX = cupLeft + cupWidth/2 - 10; // 阴影中心向左偏移10个单位
      const shadowCenterY = cupBottom + 8; // 稍微降低阴影位置
      
      const shadowGradient = ctx.createRadialGradient(
        shadowCenterX, shadowCenterY, 0,
        shadowCenterX, shadowCenterY, cupWidth * 1.2 // 扩大渐变范围
      )
      shadowGradient.addColorStop(0, 'rgba(0, 0, 0, 0.35)') // 稍微加深中心阴影
      shadowGradient.addColorStop(0.6, 'rgba(0, 0, 0, 0.15)')
      shadowGradient.addColorStop(1, 'rgba(0, 0, 0, 0)')
      
      ctx.fillStyle = shadowGradient
      ctx.ellipse(
        shadowCenterX, // x 中心（向左偏移）
        shadowCenterY-10, // y 中心（稍微低于杯底）
        cupWidth * 0.9, // x 半径（更宽）
        11, // y 半径（更扁平）
        Math.PI * 0.1, // 轻微旋转角度，让阴影看起来更有方向性
        0, // 起始角度
        Math.PI * 2 // 结束角度（完整圆）
      )
      ctx.fill()
      
      // 绘制杯子外框 - 保持垂直边缘
      ctx.beginPath()
      ctx.strokeStyle = cupOutlineColor
      ctx.lineWidth = 3
      
      // 直线杯身
      ctx.moveTo(cupLeft, cupTop)
      ctx.lineTo(cupLeft, cupBottom - 10)
      // 杯底弧度
      ctx.quadraticCurveTo(cupLeft, cupBottom, cupLeft + 10, cupBottom)
      ctx.lineTo(cupRight - 10, cupBottom)
      ctx.quadraticCurveTo(cupRight, cupBottom, cupRight, cupBottom - 10)
      ctx.lineTo(cupRight, cupTop)
      ctx.stroke()
      
      // 杯口
      ctx.beginPath()
      ctx.strokeStyle = cupHighlightColor
      ctx.lineWidth = 3
      ctx.moveTo(cupLeft - 2, cupTop)
      ctx.lineTo(cupRight + 2, cupTop)
      ctx.stroke()
      
      // 绘制水 - 带简单平面水面
      if (percentage > 0) {
        const waterHeight = (cupBottom - cupTop) * percentage
        const waterTop = cupBottom - waterHeight
        
        // 绘制水的主体
        ctx.beginPath()
        ctx.fillStyle = waterBaseColor
        
        // 平直水面
        ctx.moveTo(cupLeft, waterTop)
        ctx.lineTo(cupRight, waterTop)
        
        // 完成水的形状
        ctx.lineTo(cupRight, cupBottom)
        ctx.lineTo(cupLeft, cupBottom)
        ctx.closePath()
        ctx.fill()
        
        // 水面亮光效果
        if (percentage > 0.05) {
          ctx.beginPath()
          ctx.fillStyle = waterHighlightColor
          const highlightY = waterTop + 10
          ctx.moveTo(cupLeft + 5, highlightY)
          ctx.lineTo(cupRight - 5, highlightY)
          ctx.lineTo(cupRight - 8, highlightY + 3)
          ctx.lineTo(cupLeft + 8, highlightY + 3)
          ctx.closePath()
          ctx.fill()
        }
      }
      
      // 杯子侧面高光
      ctx.beginPath()
      ctx.strokeStyle = cupHighlightColor
      ctx.lineWidth = 1
      ctx.moveTo(cupLeft + 5, cupTop + 20)
      ctx.lineTo(cupLeft + 5, cupBottom - 20)
      ctx.stroke()
    },

    navigateToMilkTea() {
      wx.showLoading({
        title: '正在加载...',
      })
      
      // Check if the page exists in app.json configuration
      const pages = getCurrentPages()
      
      wx.navigateTo({
        url: '/pages/milkTea/milkTea',
        success: () => {
          console.log('成功跳转到奶茶页面')
          wx.hideLoading()
        },
        fail: (err) => {
          console.error('奶茶页面跳转失败:', err)
          wx.hideLoading()
          wx.showToast({
            title: '页面跳转失败: ' + (err.errMsg || '未知错误'),
            icon: 'none',
            duration: 3000
          })
        }
      })
    },
  },
})
